.docExplorerWrap {
  height: unset !important;
  min-width: unset !important;
  width: unset !important;
}

.docExplorerWrap svg {
  display: unset;
}

.doc-explorer-title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-medium);
}

.doc-explorer-rhs {
  display: none;
}

.graphiql-explorer-root {
  font-family: var(--font-family-mono) !important;
  font-size: var(--font-size-body) !important;
  padding: 0 !important;
}

.graphiql-explorer-root > div > div {
  border-color: hsla(
    var(--color-neutral),
    var(--alpha-background-heavy)
  ) !important;
  padding-top: var(--px-16);
}

.graphiql-explorer-root > div {
  overflow: auto !important; /* override overflow: scroll */
}

.graphiql-explorer-root input {
  background: unset;
}

.graphiql-explorer-root select {
  background: hsl(var(--color-base)) !important;
  border: 1px solid hsla(var(--color-neutral), var(--alpha-secondary));
  border-radius: var(--border-radius-4);
  color: hsl(var(--color-neutral)) !important;
  margin: 0 var(--px-8);
  padding: var(--px-4) var(--px-6);
}

.toolbar-button {
  all: unset;
  cursor: pointer;
  line-height: 0 !important;
  margin-left: var(--px-6);
  color: hsl(var(--color-primary));
  font-size: var(--font-size-h3) !important;
}

.graphiql-explorer-slug .toolbar-button,
.graphiql-explorer-graphql-arguments .toolbar-button {
  font-size: inherit !important;
}

.graphiql-explorer-graphql-arguments input {
  line-height: 0;
  min-width: 2rem;
}

.graphiql-explorer-actions {
  border-color: hsla(
    var(--color-neutral),
    var(--alpha-background-heavy)
  ) !important;
}
